<template>
    <div class="info">
        <div class="zk-group">
            <div>
            <input class="zk-group_input" type="text" v-model.lazy='account.loginName' placeholder="手机号">
            </div>
            <p>您输入的手机号不正确</p>
        </div>
        <div class="zk-group">
            <div>
            <input class="zk-group_input" type="text" v-model.lazy='account.password' placeholder="密码">
            </div>
            <p>您输入的手机号不正确</p>
        </div>
        <div class="zk-group">
            <div>
            <input class="zk-group_input" type="text" v-model.lazy='account.rePassword' placeholder="确认密码">
            </div>
            <p>您输入的手机号不正确</p>
        </div>
        <div class="zk-group">
            <button class="zk-group-btn">保存</button>
        </div>
    </div>
</template>
<script>
export default {
  data () {
    return {
      account: {
        userName: '',
        career: '',
        mobile: '',
        email: ''
      }
    }
  }
}
</script>
<style>
  .info {
    padding-top: 20px;
  }
  .zk-group {
      padding: 0 20px 20px 20px;
  }
  .zk-group>div {
      display: flex;
      align-items: center;
      justify-content: center;
  }
  .zk-group-btn {
      text-align: right;
      width: 112px;
      text-align: center;
      line-height: 36px;
      height: 36px;
      padding-right: 20px;
      font-size: 14px;
      background: #01bcd4;
  }
  .zk-group_input {
      border: 1px solid #cccccc;
      border-radius: 3px;
      width: 100%;
      font-size: 14px;
      height: 36px;
      padding-left: 10px;
      color: #cccccc
  }
  .zk-group p {
      font-size: 14px;
      color: red;
      display: none;
  }
</style>
